"use client";

import { useEffect, useState } from "react";
import { ThumbsUp, MessageCircle, Share, Bookmark, Heart, Award } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";

interface VideoInfoProps {
  videoData: {
    id: string;
    title: string;
    description: string;
    uploadDate: string;
    viewCount: string;
    likeCount: string;
    coinCount: string;
    favoriteCount: string;
    shareCount: string;
    commentCount: string;
    tags: string[];
    uploaderName: string;
    uploaderAvatar: string;
    uploaderFollowers: string;
    isUploader: boolean;
  };
}

export default function VideoInfo({ videoData }: VideoInfoProps) {
  const [isFollowing, setIsFollowing] = useState(false);
  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
  const [userActions, setUserActions] = useState({
    liked: false,
    favorited: false,
    coined: false,
  });

  const toggleFollow = () => {
    setIsFollowing(!isFollowing);
  };

  const handleAction = (action: 'liked' | 'favorited' | 'coined') => {
    setUserActions((prev) => ({
      ...prev,
      [action]: !prev[action],
    }));
  };

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    });
  };

  return (
    <div className="bg-white rounded-lg shadow-sm p-4 mt-4">
      {/* Video title */}
      <h1 className="text-xl font-bold text-gray-900">{videoData.title}</h1>

      {/* Video stats */}
      <div className="flex items-center mt-2 text-sm text-gray-500">
        <span>{videoData.viewCount} 播放</span>
        <span className="mx-2">•</span>
        <span>{formatDate(videoData.uploadDate)}</span>
      </div>

      {/* Uploader info and actions */}
      <div className="flex justify-between items-center mt-4 pb-4 border-b">
        <div className="flex items-center">
          <HoverCard>
            <HoverCardTrigger asChild>
              <div className="flex items-center cursor-pointer">
                <Avatar className="h-10 w-10 mr-3">
                  <AvatarImage src={videoData.uploaderAvatar} alt={videoData.uploaderName} />
                  <AvatarFallback>{videoData.uploaderName.slice(0, 2)}</AvatarFallback>
                </Avatar>
                <div>
                  <p className="text-sm font-medium text-gray-900">{videoData.uploaderName}</p>
                  <p className="text-xs text-gray-500">{videoData.uploaderFollowers} 粉丝</p>
                </div>
              </div>
            </HoverCardTrigger>
            <HoverCardContent className="w-80 p-4">
              <div className="flex justify-between items-start">
                <div className="flex items-center">
                  <Avatar className="h-12 w-12 mr-3">
                    <AvatarImage src={videoData.uploaderAvatar} alt={videoData.uploaderName} />
                    <AvatarFallback>{videoData.uploaderName.slice(0, 2)}</AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="text-sm font-medium">{videoData.uploaderName}</p>
                    <p className="text-xs text-gray-500">{videoData.uploaderFollowers} 粉丝</p>
                  </div>
                </div>
                <Button
                  variant={isFollowing ? "outline" : "default"}
                  size="sm"
                  onClick={toggleFollow}
                  className={isFollowing ? "text-gray-600" : "bg-secondary hover:bg-secondary/90 text-white"}
                >
                  {isFollowing ? "已关注" : "+ 关注"}
                </Button>
              </div>
              <p className="text-sm text-gray-600 mt-3">UP主简介：这里是UP主的个人简介，分享有趣和有用的内容。</p>
            </HoverCardContent>
          </HoverCard>
        </div>

        <Button
          variant={isFollowing ? "outline" : "default"}
          size="sm"
          onClick={toggleFollow}
          className={isFollowing ? "text-gray-600" : "bg-secondary hover:bg-secondary/90 text-white"}
        >
          {isFollowing ? "已关注" : "+ 关注"}
        </Button>
      </div>

      {/* Video description */}
      <div className="mt-4">
        <div className={`text-sm text-gray-700 whitespace-pre-wrap ${!isDescriptionExpanded ? "line-clamp-2" : ""}`}>
          {videoData.description}
        </div>
        {videoData.description.length > 100 && (
          <button
            onClick={() => setIsDescriptionExpanded(!isDescriptionExpanded)}
            className="text-xs text-primary mt-1 hover:underline"
          >
            {isDescriptionExpanded ? "收起" : "展开"}
          </button>
        )}

        {/* Tags */}
        <div className="mt-3 flex flex-wrap gap-2">
          {videoData.tags.map((tag, index) => (
            <span key={index} className="text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 cursor-pointer">
              #{tag}
            </span>
          ))}
        </div>
      </div>

      {/* Engagement buttons */}
      <div className="flex flex-wrap mt-4 gap-2 md:gap-4">
        <button
          onClick={() => handleAction('liked')}
          className={`flex items-center px-4 py-2 rounded-full border ${userActions.liked ? 'border-primary text-primary bg-blue-50' : 'border-gray-300 text-gray-700 hover:bg-gray-100'}`}
        >
          <ThumbsUp className={`w-4 h-4 mr-1 ${userActions.liked ? 'fill-primary' : ''}`} />
          <span>{userActions.liked ? parseInt(videoData.likeCount) + 1 : videoData.likeCount}</span>
        </button>

        <button className="flex items-center px-4 py-2 rounded-full border border-gray-300 text-gray-700 hover:bg-gray-100">
          <MessageCircle className="w-4 h-4 mr-1" />
          <span>{videoData.commentCount}</span>
        </button>

        <button
          onClick={() => handleAction('coined')}
          className={`flex items-center px-4 py-2 rounded-full border ${userActions.coined ? 'border-yellow-500 text-yellow-500 bg-yellow-50' : 'border-gray-300 text-gray-700 hover:bg-gray-100'}`}
        >
          <Award className={`w-4 h-4 mr-1 ${userActions.coined ? 'fill-yellow-500' : ''}`} />
          <span>{userActions.coined ? parseInt(videoData.coinCount) + 1 : videoData.coinCount}</span>
        </button>

        <button
          onClick={() => handleAction('favorited')}
          className={`flex items-center px-4 py-2 rounded-full border ${userActions.favorited ? 'border-pink-500 text-pink-500 bg-pink-50' : 'border-gray-300 text-gray-700 hover:bg-gray-100'}`}
        >
          <Bookmark className={`w-4 h-4 mr-1 ${userActions.favorited ? 'fill-pink-500' : ''}`} />
          <span>{userActions.favorited ? parseInt(videoData.favoriteCount) + 1 : videoData.favoriteCount}</span>
        </button>

        <button className="flex items-center px-4 py-2 rounded-full border border-gray-300 text-gray-700 hover:bg-gray-100">
          <Share className="w-4 h-4 mr-1" />
          <span>{videoData.shareCount}</span>
        </button>
      </div>
    </div>
  );
}
